<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>

<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="css/register.css">

</head>
<body>
	<div class="zhuce_layout">
		<div class="rg_left">
			<p id=first_font>新用户注册</p>
			<p id=sec_font>USER REGISTER</p>
		</div>

		<div class="rg_center">
			<form action="./registerServlet" method="post" id="form">
				<table>
					<tr>
						<td id="td_l1"><lable for="username">用户名</lable></td>
						<td id="td_r1"><input type="text" name="username" id="username"
							placeholder="请输入用户名"> <span id="suser" class ="error"></span></td>
							
					</tr>
					<tr>
						<td id="td_l1"><lable for="2">密码</lable></td>
						<td id="td_r1"><input type="password" name="pass" id="password"
							placeholder="请输入密码，6-10位纯数字"><span id="pass" class ="error"></span></td>
					</tr>
					<tr>
						<td id="td_l1"><lable for="3">E-mail</lable></td>
						<td id="td_r1"><input type="email" name="email" id="email"
							placeholder="请输入电子邮箱"></td>
					</tr>

					<tr>
						<td id="td_l1"><lable for="4">省份</lable></td>
						<td id="td_r1"><input type="text" name="province" id="name"
							placeholder="请输入您所在的省份"></td>
					</tr>

					<tr>
						<td id="td_l1"><lable for="5">手机号</lable></td>
						<td id="td_r1"><input type="number" name="phone_num" id="number"
							placeholder="请输入手机号"></td>
					</tr>

					<tr>
						<td id="td_l1"><lable for="6">性别</lable></td>
						<td id="td_r1"><input type="radio" name="gender" id="gender" value="男">男   
							<input type="radio" name="gender" id="gender" value="女">女</td>
					</tr>

					<tr>
						<td id="td_l1"><lable for="7">出生日期</lable></td>
						<td id="td_r1"><input type="text" name="birthday" id="birstday"
							placeholder="请输入出生日期"></td>
					</tr>

			
					<tr>
						<td colspan="2" class="sub_mit" ><input type="submit"
							value="注册" id="submit" ></td>
					</tr>
				</table>
		</div>

		<div class="rg_right">
			已有账号？<a href="./Login.jsp">立即登录</a>
		</div>
	</div>


	</form>
	
	<script>
	
	function checkUser() {
	var User=document.getElementById("username").value;
	var reg_User = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}$/;
	var flag=reg_User.test(User);
	var suser=document.getElementById("suser");
	
	if(flag){
		//true
	//发送ajax请求查询用户名是否存在
				$.post("./checkUserServlet",{username:$("#username").val()},function(data){
					if(data)
						suser.innerHTML="&#160"+"&#160"+"&#160"+"<img width=15 high=10 src='./img/gou.png'>";	
					else{
						suser.innerHTML = "用户名已存在";	
						}
				});
	}else
		{
		suser.innerHTML = "格式有误";
		//false
		}
	return flag;
	}
	
	
	function checkPassword() {
		var password=document.getElementById("password").value;
		var reg_pass = /^\d{6}$/;
		var flag=reg_pass.test(password);
		var suser=document.getElementById("pass");
		
		if(flag){
			pass.innerHTML="&#160"+"&#160"+"&#160"+"<img width=15 high=10 src='./img/gou.png'>";
			//true
		}else
			{
			pass.innerHTML = "密码格式有误";
			//false
			}
		return flag;
		}
	
	document.getElementById("username").onblur=checkUser;
	
	document.getElementById("password").onblur=checkPassword;
	
	document.getElementById("form").onsubmit = function () {
	
		return checkUser()&&checkPassword();
	}
	
	
	</script>
</body>
</html>